<template>
  <div class="content" >
    <header>
      <el-button type="success" style="float: right;margin-right: 20px;" @click="addShow = true">充值规则设置</el-button>
      <el-form :model="searchData">
        <el-form-item>
          <el-input v-model.trim="searchData.keyword" clearable placeholder="会员昵称/手机号" @change="getTableData" style="width: 160px;"/>
        </el-form-item>

        <el-form-item>
          <el-input v-model.trim="searchData.carNumber" clearable placeholder="绑定车牌" @change="getTableData" style="width: 120px;"/>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="注册开始日期"
            end-placeholder="注册结束日期"
            value-format="yyyy-MM-dd"
            @change="changDate">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"  icon="el-icon-search" @click="getTableData">搜索</el-button>
        </el-form-item>
      </el-form>

    </header>

    <div class="box">
      <div class="memberNum1">
        <span class="menberNumTitle">会员：</span>
        <span class="menberNums">{{ total }}</span> 人
      </div>
    </div>

    <section>
      <el-table :data="tableData" height="100%" border v-loading="tableLoading">
        <el-table-column prop="nickname" label="会员昵称" align="center" width="100"/>
        <el-table-column prop="mobilePhone" label="手机号码" align="center" width="110"/>
        <el-table-column prop="createTime" label="注册时间" align="center" width="160"/>
        <el-table-column label="绑定车牌" align="center" width="206">
          <template slot-scope="scope" >
            <p v-for="item in (scope.row.carNumberList)" class="carBox" :class="{'carBoxNew':(item.length%7)}">{{ item }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="chargeParkDuration" label="累计停车时长(分)" align="center" />
        <el-table-column prop="paidAmount" label="累计充值金额(元)" align="center" />
        <el-table-column prop="vipType" label="月租服务状态" align="center" />
        <el-table-column prop="rechargeAmount" label="账户余额(元)" align="center" />
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="detailsShow = true;id=scope.row.id" icon="el-icon-tickets">账户详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 分页 -->
    <footer>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchData.pageNum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog :visible.sync="detailsShow" width="720px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <MemberDetails v-if="detailsShow" :id="id" @closeDialog="detailsShow = false" @refresh="getTableData()" />
    </el-dialog>

    <el-dialog title="充值规则设置" width="510px" :visible.sync="addShow" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <RechargeRule v-if="addShow" @closeDialog="addShow = false"/>
    </el-dialog>


  </div>
</template>
<script>
  import MemberDetails from './components/memberDetails.vue'
  import RechargeRule from './components/rechargeRules.vue'


export default {
  name: 'Member',
  components: { MemberDetails , RechargeRule},
  data() {
    return {
      addShow: false,
      tableData: [],
      vipCount: '',
      notVipCount: '',
      searchData: {
        currentPage: 1,
        pageSize: 10
      },
      detailsShow: false,
      tableLoading: true,
      date: null,
      total: 0
    }
  },
  mounted() {
    this.getTableData();
    this.getMemberNum();
  },
  methods: {
    getTableData() {
      this.$axios({
        method: 'get',
        url: '/customer/info/getCustomerPage',
        params: this.searchData
      }).then((res) => {
        this.tableData = res.data.records;
        this.tableLoading = false;
        this.total = res.data.total;
      })
    },
    getMemberNum() {
      this.$axios({
        method: 'get',
        url: '/customer/info/getVipCount'
      }).then((res) => {
        if (res.code == 200) {
          this.vipCount = res.data.vipCount;
          this.notVipCount = res.data.notVipCount;
        }
      })
    },
    changDate() {
      if(this.date) {
        this.searchData.beginTime = this.date[0];
        this.searchData.endTime = this.date[1];
      } else {
        this.searchData.beginTime = null;
        this.searchData.endTime = null;
      }
      this.getTableData();
    },
    //分页修改每页显示条数
    handleSizeChange(val){
      this.searchData.pageSize = val;
      this.getTableData();
    },
    //分页跳转页面
    handleCurrentChange(val){
      this.searchData.currentPage = val;
      this.getTableData();
    },

  }
}
</script>
<style scoped>
  .content {
    padding: 10px;
    height: 100%;
    width: 100%;
    position: absolute;
  }
  header {
    height: 40px;
  }
  .box {
    height: 45px;
  }
  section {
    height: calc(100% - 135px);
  }
  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .el-form-item {
    display: inline-block;
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 140px;
  }
  .memberNum1,
  .memberNum2 {
    display: inline-block;
    border-radius: 4px;
    padding: 8px 14px;
  }
  .memberNum1 {
    background-color: #ddf5f0;
    color: #1abc9c;
  }
  .memberNum2 {
    background-color: #fff5df;
    color: #ffb716;
  }
  .menberNumTitle {
    font-size: 16px;
    font-weight: bold;
  }
  .menberNums {
    font-size: 18px;
    font-weight: bold;
  }
  .carBox {
    background-color: #6DAAEA;
    color: #fff;
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 5px;
  }
  .carBoxNew {
    background-image: linear-gradient(to bottom,#A0E77D,#BADEA8);
    color: #000000;
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 5px;
  }

</style>
